<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title> mpSlideBox </title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="author" content="Murat Purc, murat@purc.de" />
	<meta name="copyright" content="&copy; {%COPYRIGHT%}" />
	<meta name="description" content="mpSlideBox: A JavaScript slidebox (carousel like) based on Prototype &amp; script.aculo.us." />
	<meta name="keywords" content="mpSlideBox, Slidebox, Slide box, JavaScript, Carousel, Prototype, script.aculo.us" />
    <script src="./js/scriptaculous-js-1.8.2/lib/prototype.js" type="text/javascript"></script>
    <script src="./js/scriptaculous-js-1.8.2/src/scriptaculous.js" type="text/javascript"></script>
    <script src="./js/mpSlideBox.js" type="text/javascript"></script>
    <link href="./mpSlideBox.css" rel="stylesheet" type="text/css" media="screen" />
    <style type="text/css">/* <![CDATA[ */
    #slideBox {position:relative;width:500px;height:250px; min-height:250px;overflow:hidden;}
    #slideBox .slideBoxItem {text-align:left;}
    #slideBox .slideBoxItem img {display:block; margin-bottom:10px;}
    #slideBox .slideBoxItem p {margin:0; padding:5px; background:#eaeaea;}
    /* ]]> */</style>
    <script type="text/javascript">/* <![CDATA[ */
    var slideBox;
    document.observe("dom:loaded", function(){
        slideBox = new mpSlideBox("slideBox", {
//            autostart:     true,
            itemsClass:    "slideBoxItem",
            startPos:      "0",
            useItemsSizes: true,
            interval:      3,
            spacer:        100,
            duration:      1,
            direction:     "random"
        });
    });
    /* ]]> */</script>
</head>

<body>

<div id="centerBox">

    <h1>Slidebox example with text</h1>

    <p>Slides several slide container without autostart option and with random option.</p>

    <div id="slideBox">

        <div class="slideBoxItem">
            <p>1. This post will help you in checking out most stunning Script.aculo.us Applications in the World of Web and at the same time might help you in coming up with new web applications using Script.aculo.us. I would like to request all the developers to have a look at these stunning applications which are made and developed by Script.aculo.us</p>
        </div>

        <div class="slideBoxItem">
            <p>2. Scriptaculous slider trick
            Yesterday I was looking at the Scriptaculous library, in particular the slider bar. I had used it once before with some success, using a graphic for the track and gripper. But that’s was boring! What I wanted was to see the bar fill up with colour when it was slide.</p>
        </div>

        <div class="slideBoxItem">
            <p>3. Star Box: rating stars for prototype
            Starbox allows you to easily create all kinds of rating boxes using just one PNG image. The library is build on top of the Prototype javascript framework. For some extra effects you can add Scriptaculous as well. Check the demos below to see what Starbox is all about and read on for more information on how to customize your own Starboxes.</p>
        </div>

        <div class="slideBoxItem">
            <p>4. Scriptaculous Effects Demo
            Move your mouse over the words at the left to see how an effects work. Holding your mouse over the effect with repeat it. If you move your mouse over another effect, it will start when the previous effect finishes.</p>
        </div>

    </div>


    <div class="slideBoxButtons clearfix">
        <a href="javascript:void(0);" class="previous" onclick="slideBox.previous();" title="previous Item"><span>previous</span></a>
        <a href="javascript:void(0);" class="start" onclick="slideBox.start();" title="start Slide"><span>start</span></a>
        <a href="javascript:void(0);" class="stop" onclick="slideBox.stop();" title="stop Slide"><span>stop</span></a>
        <a href="javascript:void(0);" class="next last" onclick="slideBox.next();" title="next Item"><span>next</span></a>
    </div>

    <p id="footer">
        URL: <a href="http://code.google.com/p/mpslidebox/" title="Go to mpSlideBox's project page at Google code">mpSlideBox at Google code</a><br /> 
        Author: Murat Purc (<a href="http://www.purc.de/" title="Visit authors homepage">www.purc.de</a>),
        &copy; {%COPYRIGHT%}
    </p>

</div>

</body>
</html>
